<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="resetForm"
        @reset="searchSubmit"
      />
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer style="margin-bottom: 10px">
        <div style="display: flex; margin: 0">
          <Button icon="add" style="margin-right: 12px" @click="handleAdd"
            >新增</Button
          >
        </div>
      </OperationContainer>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8' }"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
        height="100%"
      >
        <el-table-column align="center" type="index" label="" width="60" />
        <el-table-column prop="edExtraFirstCode" label="卫生材料编号" />
        <el-table-column prop="edExtraFirstDescription" label="卫生材料名称" />
        <el-table-column prop="edExtraSecondCode" label="成本项目编号" />
        <el-table-column prop="edExtraSecondDescription" label="成本项目名称" />
        <el-table-column align="center" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.rowStatus"
              active-color="#FFA712"
              active-value="0"
              inactive-value="1"
              @change="switchUse(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <i
                class="el-icon-edit-outline"
                style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handleEdit(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              style="margin-left: 10px"
            >
              <i
                class="el-icon-delete"
                style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handleDel(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="pageAttr.total"
        :page="pageAttr.currentPage"
        :page-size="pageAttr.pageSize"
        @pagation="pagationChange"
      />
      <Dialog
        :title="title"
        :visible="dialogVisible"
        :footer-btns="[
          {
            text: '保存',
            type: 'primary',
            trigger: 'confirm',
          },
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @cancel="dialogVisible = false"
        @confirm="handleConfirm"
      >
        <el-form ref="form" :model="formInfo" label-width="180px" size="small">
          <el-form-item label="卫生材料名称">
            <el-select v-model="formInfo.edExtraFirstCode" placeholder="请选择">
              <el-option
                v-for="item in gzDept"
                :key="item.edExtraFirstCode"
                :label="item.edExtraFirstDescription"
                :value="item.edExtraFirstCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成本项目名称">
            <el-select
              v-model="formInfo.edExtraSecondCode"
              placeholder="请选择"
            >
              <el-option
                v-for="item in hsDYList"
                :key="item.edCode"
                :label="item.edName"
                :value="item.edCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </Dialog>
    </Container>
  </ContainerGroup>
</template>

<script>
import { BasicParams } from "../../../utils/basicParams";
import {
  getEnumDetailSourcePage,
  batchDeleteEnumDetail,
  addEnumDetail,
  modifyEnumDetail,
  getEnumDetailSource,
  listEdFirstByFuzzy,
  listCostItemDictByFuzzy,
} from "../../../utils/apis/basic";
export default {
  name: "Materials", // 成本-卫生材料
  components: {},
  data() {
    return {
      gzDept: [],
      hsDYList: [],
      formInfo: {
        edExtraFirstCode: "",
        edExtraSecondCode: "",
      },
      title: "",
      dialogVisible: false,
      title: "",
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      filterElements: [
        {
          key: "edExtraFirstCode",
          type: "Select",
          label: "卫生材料名称",
          value: "",
          width: 210,
          itemLabel: "edExtraFirstDescription",
          itemValue: "edExtraFirstCode",
          options: [],
          filterable: true,
          clearable: true,
        },
        {
          key: "costItemCode",
          type: "Select",
          label: "成本项目名称",
          value: "",
          width: 210,
          itemLabel: "edName",
          itemValue: "edCode",
          options: [],
          filterable: true,
          clearable: true,
        },
        {
          key: "rowStatus",
          type: "Select",
          label: "启用状态",
          value: "",
          width: 210,
          options: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "已启用",
              value: "0",
            },
            {
              label: "未启用",
              value: "1",
            },
          ],
        },
      ],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [],
      tableLoading: false,
      rowId: "",
    };
  },
  created() {
    this.getSelect();
  },
  mounted() {},
  methods: {
    switchUse(row) {
      let basicParams = new BasicParams();
      basicParams.edId = row.edId;
      basicParams.rowStatus = row.rowStatus;
      basicParams.edParentCode = "CostItem";
      modifyEnumDetail(basicParams).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.getData();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleEdit(row) {
      // this.formInfo.edExtraFirstCode = "";
      // this.formInfo.edExtraSecondCode = "";
      this.rowId = row.edId;
      this.title = "编辑";
      this.dialogVisible = true;
      let basicParams = new BasicParams();
      basicParams.edId = row.edId;
      basicParams.edParentCode = "RD_CostMaterialsRelation";
      this.formInfo.edExtraFirstCode = row.edExtraFirstCode;
      this.formInfo.edExtraSecondCode = row.edExtraSecondCode;
      // getEnumDetailSource(row.edId).then((res) => {
      //   if (res.data.code == 200) {
      //     this.formInfo.edExtraFirstCode = res.data.data.edExtraFirstCode;
      //     this.formInfo.edExtraSecondCode = res.data.data.edExtraSecondCode;
      //   }
      // });
    },
    handleDel(row) {
      //删除
      let ids = [row.edId];
      this.$confirm({
        title: "温馨提示",
        content: "您确定要删除该条数据?",
        okText: "确定",
        cancelText: "取消",
        okFn: () => {
          batchDeleteEnumDetail(ids).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
              this.pageAttr.currentPage = 1;
              this.getData();
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        cancelFn: () => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        },
      });
    },
    handleAdd() {
      //新增
      this.formInfo.edExtraFirstCode = "";
      this.formInfo.edExtraSecondCode = "";
      this.title = "新增";
      this.dialogVisible = true;
    },
    handleConfirm() {
      //确定
      if (!this.formInfo.edExtraFirstCode) {
        this.$message.warning("请选择HIS科室名称");
        return;
      }
      if (!this.formInfo.edExtraSecondCode) {
        this.$message.warning("请选择核算单元名称");
        return;
      }
      let basicParams = new BasicParams();
      basicParams.edExtraFirstCode = this.formInfo.edExtraFirstCode;
      basicParams.edExtraFirstDescription = this.gzDept.find(
        (item) => this.formInfo.edExtraFirstCode == item.edExtraFirstCode
      ).edExtraFirstDescription;
      basicParams.edExtraSecondCode = this.formInfo.edExtraSecondCode;
      basicParams.edExtraSecondDescription = this.hsDYList.find(
        (item) => this.formInfo.edExtraSecondCode == item.edCode
      ).edName;
      basicParams.edParentCode = "RD_CostMaterialsRelation";
      basicParams.edCode = `${this.formInfo.edExtraFirstCode}-${this.formInfo.edExtraSecondCode}`;
      basicParams.edName = `科室-工资对应`;
      if (this.title == "新增") {
        addEnumDetail(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.getData();
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else {
        basicParams.edId = this.rowId;
        modifyEnumDetail(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.getData();
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    getSelect() {
      // 卫生材料名称
      listEdFirstByFuzzy({
        edParentCode: "RD_CostMaterialsRelation",
      }).then((res) => {
        if (res.data.code === 200) {
          this.filterElements[0].options = res.data.data;
          this.gzDept = res.data.data;
        }
      });
      // 成本项目名称
      getEnumDetailSource({
        edParentCode: "CostItem",
      }).then(async (res) => {
        if (res.data.code === 200) {
          this.filterElements[1].options = res.data.data;
          this.hsDYList = res.data.data;
        }
      });
    },
    // 分页
    pagationChange(payload) {
      this.pageAttr.currentPage = payload.page;
      this.pageAttr.pageSize = payload.pageSize;
      this.getData();
    },
    getData(val) {
      // 获取列表
      let basicParams = new BasicParams();
      if (val) {
        basicParams.edExtraFirstCode = val.edExtraFirstCode; // 工资科室编码
        basicParams.edExtraSecondCode = val.costItemCode; // 核算单元编码
        basicParams.relationStatus = val.relationStatus; // 关联状态编码日 0 关联 1 未关联
        basicParams.rowStatus = val.rowStatus; // 启用状态编码日 0 启用 1 未启用
      }
      basicParams.edParentCode = "RD_CostMaterialsRelation";
      basicParams.pageIndex = this.pageAttr.currentPage;
      basicParams.pageSize = this.pageAttr.pageSize;
      this.tableLoading = true;
      getEnumDetailSourcePage(basicParams).then((res) => {
        if (res.data.code === 200) {
          this.tableLoading = false;
          this.tableData = res.data.data.list;
          this.pageAttr.total = res.data.data.total || 0;
        }
      });
    },
    resetForm(data) {
      // 查询
      console.log("data", data);
      this.getData(data);
    },
    searchSubmit() {},
  },
};
</script>

<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
</style>
